// import React, { useState } from "react";
import { BasicForm, useForm } from "@/components/Form";
import { useTranslation } from "react-i18next";
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from "@/components/Table/index";
import { useEffect, useState } from "react";
import { message } from "antd";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { staffTrainingDelete, staffTrainingList } from "@/api/SecondmentDictionary";
import { isArray } from "@/utils/is";
import CreateAndUpdata from "./components/createAndUpdata";
import { useDrawer } from "@/components/Drawer";
import { IconEnum } from "@/enums/appEnum";
let pageNo: Number = 1;
let pageSize: Number = 10;
export default function staff_training() {
	const { t } = useTranslation();
	const [staffList, setStaffList] = useState([]);
	let btnList = [
		{
			key: "add"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.sq_numb"),
			dataIndex: "index",
			render: (text, record, index) => index * 1 + 1 // 设置序号
		},
		{
			title: t("felix_ui.full_name"),
			dataIndex: "fullName",
			width: 160
		},
		{
			title: t("felix_ui.birthday"),
			dataIndex: "birthday"
		},
		{
			title: t("felix_ui.gender"),
			dataIndex: "gender",
			render: (gender: any) => {
				if (gender == 0) return t("kevin_ui.male");
				return t("kevin_ui.female");
			}
		},
		{
			title: t("felix_ui.unit"),
			dataIndex: "workplace"
		},
		{
			title: t("felix_ui.poz_level"),
			dataIndex: "pozLevel"
		},
		{
			title: t("felix_ui.trainingLocation"),
			dataIndex: "trainingPlace"
		},
		{
			title: t("felix_ui.trainingCourseName"),
			dataIndex: "trainingCourse"
		},
		{
			title: t("felix_ui.trainingMethod"),
			dataIndex: "trainingForms",
			render: (trainingForms: any) => {
				if (trainingForms == 0) return t("kevin_ui.onLine");
				return t("kevin_ui.Offline");
			}
		},
		{
			title: t("felix_ui.date_from"),
			dataIndex: "dateFrom"
		},
		{
			title: t("felix_ui.date_to"),
			dataIndex: "dateTo"
		},
		{
			title: t("kevin_ui.operate"),
			width: 200,
			fixed: "right",
			render: (_, record) => {
				return (
					<TableAction
						actions={[
							{
								icon: IconEnum.EDIT,
								label: t("felix_ui.edit"),
								onClick: upData(record)
							},
							{
								icon: IconEnum.DELETE,
								label: t("felix_ui.delete"),
								popConfirm: {
									title: t("common.deleteMessage"),
									placement: "left",
									confirm: deleteFn.bind(null, record)
								}
							}
						]}
					></TableAction>
				);
			}
		}
	];
	const [registerDrawer, { openDrawer }] = useDrawer();
	const [registerTable, { setPagination }] = useTable({
		dataSource: staffList,
		columns,
		useSearchForm: false,
		showTableSetting: false,
		bordered: true
	});

	const formSchemaTop: FormSchema[] = [
		{
			label: t("felix_ui.full_name"),
			field: "fullName",
			component: "Input",
			colProps: { span: 6 }
		},
		{
			label: t("felix_ui.gender"),
			field: "gender", //性别
			component: "Select",
			componentProps: {
				options: [
					{ label: t("kevin_ui.male"), value: 0 },
					{ label: t("kevin_ui.female"), value: 1 }
				]
			},
			colProps: { span: 6 }
		},
		{
			label: t("felix_ui.trainingMethod"),
			field: "trainingForms", //训练方法
			component: "Select",
			componentProps: {
				options: [
					{ label: t("kevin_ui.onLine"), value: 0 },
					{ label: t("kevin_ui.Offline"), value: 1 }
				]
			},
			colProps: { span: 6 },
			labelWidth: 120
		},
		{
			label: t("felix_ui.trainingCourseName"),
			field: "trainingCourse", //培训课程名称
			component: "Input",
			colProps: { span: 6 },
			labelWidth: 120
		},
		{
			label: t("felix_ui.unit"),
			field: "workplace", //工作地址
			component: "Input",
			colProps: { span: 6 }
		}
	];
	const [formTop, { getFieldsValue: formTopValue }] = useForm({
		schemas: formSchemaTop,
		labelWidth: 80,
		autoSubmitOnEnter: true,
		showActionButtonGroup: true,
		submitFunc: () => {
			selectFn();
		},
		actionColOptions: { span: 24 }
	});
	const timeFn = (tiem: string) => {
		if (!tiem) return;
		const [date] = tiem.split(" ");
		return date;
	};
	const selectFn = async () => {
		const formValue = await formTopValue();
		formValue.dateFrom = timeFn(formValue.dateFrom);
		formValue.dateTo = timeFn(formValue.dateTo);
		getStaffTraining(formValue);
	};
	const handlerToolbarAction = (key: string) => {
		switch (key) {
			case "add":
				openDrawer(true, {
					getStaffTraining
				});
				break;
		}
	};
	const timeArr = (time: any) => {
		if (!time && !isArray(time)) {
			return;
		}
		let str = "";
		time.forEach((item: any, index: number) => {
			item = item >= 10 ? item : "0" + item;
			if (index == time.length - 1) {
				str = str + item;
			} else {
				str = str + item + "-";
			}
		});
		return str;
	};
	const getStaffTraining = async (value?: object) => {
		let parameter = { pageSize, pageNo };
		if (value) {
			parameter = {
				...parameter,
				...value
			};
		}
		const res = await staffTrainingList(parameter);
		res.list.forEach((item: any) => {
			item.birthday = timeArr(item.birthday);
			item.dateFrom = timeArr(item.dateFrom);
			item.dateTo = timeArr(item.dateTo);
		});
		setPagination({
			total: res.total,
			onChange: (pageN: Number, pageS: Number) => {
				pageNo = pageN;
				pageSize = pageS;
				console.log(pageN);
				getStaffTraining();
			}
		});
		setStaffList(res.list);
	};
	const upData = (record: any) => () => {
		openDrawer(true, {
			record,
			getStaffTraining
		});
	};
	const deleteFn = async (record: any) => {
		const res = await staffTrainingDelete(record.trainId);
		if (res) {
			message.success(t("kevin_ui.daleteSucceessfully"));
			getStaffTraining();
		}
	};
	useEffect(() => {
		getStaffTraining();
	}, []);
	return (
		<div className="page">
			<div className="page-content">
				<div className="block">
					<h3 className="block-label">Ⅰ、{t("kevin_ui.filter")}</h3>
					<div className="headerSelectForm">
						<BasicForm register={formTop}></BasicForm>
					</div>
				</div>
				<div className="block mt-2">
					<h3 className="block-label">Ⅱ、{t("kevin_ui.staffTraining")}</h3>
					<div>
						<BasicTable register={registerTable}></BasicTable>
					</div>
				</div>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
			<Toolbar action={handlerToolbarAction} btnList={btnList} />
		</div>
	);
}
